<template>
  <div>
    <mheader></mheader>
    <div class="content">
      <Row type="flex" justify="center">
        <Col span="16">
        <Row class="breadcrumb">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">首页</BreadcrumbItem>
            <BreadcrumbItem to="/list/0">List</BreadcrumbItem>
            <BreadcrumbItem>Content </BreadcrumbItem>
          </Breadcrumb>
        </Row>
        <Row>
          <Card class="container">

          </Card>
        </Row>
        <Row class="detail">
          <Col span="17">
          <Card>
            <Tabs value="message" type="card">
              <TabPane label="纪念品信息" name="message">
                <div class="message-content">
                  <iframe id="miframe" :srcdoc='goods.content' frameborder="0" width="100%" scrolling="no" :height="iframeHeight" @load="setIframeHeight"></iframe>
                </div>
              </TabPane>
            </Tabs>
          </Card>
          </Col>
          <Col span="6" style="margin-left:20px;">
          <Card style="width:100%;">
            <p slot="title">
              <Icon type="fireball"></Icon>
              推荐
            </p>
            <ul style="min-height:750px;">
              <li v-for="item in items">
                <mbox :item="item"></mbox>
              </li>
            </ul>
          </Card>
          </Col>
        </Row>
        </Col>
      </Row>
    </div>
    <mfooter></mfooter>
  </div>
</template>

<script>
  import mheader from "components/mheader";
  import mfooter from "components/mfooter";

  export default {
    name: "goodsD",
    components: {
      mheader,
      mfooter,
    },
    data() {
      return {

      };
    }
  };
</script>

<style lang="css" scoped>
  .content {
    margin: 10px 0px;
  }
  .container {
    margin-top: 50px;
  }
  .detail {
    margin-top: 50px;
  }
  .show-poster {
    font-size: 12px;
    color: #8f8d8f;
    width: 249px;
    display: inline-block;
    vertical-align: top;
  }
  .poster {
    margin: -45px 0px 0px -40px;
    width: 250px;
    height: 350px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 16px 0 #aaa;
  }
  .show-count {
    font-size: 15px;
    margin-top: 5px;
  }
  .show-info {
    font-size: 12px;
    color: #000;
    display: inline-block;
    width: 60%;
  }
  .show-desc {
    font-size: 14px;
    color: #494949;
    line-height: 20px;
    margin: 10px 0px;
  }

  .money {
    font-size: 26px;
    color: #ff6c69;
    line-height: 34px;
  }

  .list-box {
    color: #333;
    font-size: 12px;
    margin: 5px auto;
  }

  .list-box h4 {
    display: inline-block;
    padding-right: 20px;
    vertical-align: top;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    font-weight: 500;
    color: #494949;
  }
  .list-normal {
    margin-top: 3px;
    display: inline-block;
    width: 85%;
  }

  .botton-group button {
    border: none;
    padding: 0;
    margin: 10px 20px 20px 0px;
    outline-style: none;
    width: 168px;
    line-height: 44px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    cursor: pointer;
    height: 44px;
    border-radius: 44px;
    filter: progid:DXImageTransform.Microsoft.gradient(
      GradientType=0,
      startColorstr=#ff785b,
      endColorstr=#ff3869
    );
  }
  .buyticket-top {
    background-image: linear-gradient(to bottom, #ff785b, #ff3869);
    box-shadow: 0 4px 9px 0 #fbc1ba;
  }
  .choose-seat-btn {
    background-image: linear-gradient(to bottom, #fec400, #fe9402);
    box-shadow: 0 4px 9px 0 #ffe09f;
  }
  .ivu-radio-group-button .ivu-radio-wrapper {
    font-size: 15px;
    border: 1px solid #ddde;
    border-radius: 100px;
    margin: 2px 5px;
  }
  .ivu-radio-group-button .ivu-radio-wrapper-checked {
    /* background: #fff; */
    border: 1px solid;
    border-left: 0px; /* color: #2d8cf0; */ /* box-shadow: -1px 0 0 0 #2d8cf0; */ /* z-index: 1; */
  }
  .ivu-radio-group-button .ivu-radio-wrapper:before,
  .ivu-radio-group-button .ivu-radio-wrapper:after {
    width: 0px;
  }
  .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
    border: 1px solid;
    /* border-left: 1px; */
  }
</style>
